<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>网易云音乐</title>
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
	<nav class="nav-container">
		<div class="nav-box">
			<div class="nav-left">
				<div class="nav-logo">
					<a href="#">网易云音乐</a>
				</div>
			</div>
			<ul class="nav-title">
				<li class="change-f">发现音乐
					<sub></sub>
				</li>
				<li>我的音乐</li>
				<li>朋友</li>
				<li>商城</li>
				<li>音乐人</li>
				<li>下载客户端
					<span class="icon-hot"></span>
				</li>
			</ul>
			<div class="nav-right">
				<div class="nav-search">
					<div class="icon-large"></div>
					<div class="search-input">
						<input type="text" placeholder="音乐/视频/电台/用户" />
					</div>
				</div>
				<div class="nav-created">
					<a>创作者中心</a>
				</div>
				<div class="enter">
					<a>登录</a>
				</div>
			</div>
		</div>

		<ul class="nav-box1">
			<li class="f-t"><a><em>推荐</em></a></li>
			<li><a><em>排行榜</em></a></li>
			<li><a>
					<em>歌单<span class="icon-R"></span></em></a></li>
			<li><a><em>主播电台</em></a></li>
			<li><a><em>歌手</em></a></li>
			<li><a><em>新碟上架</em></a></li>
		</ul>
	</nav>
	<header class="header-container">
		<div class="header-mid">
			<div class="btn-1"></div>
			<div class="picture"></div>
			<div class="download">
				<div class="change-download"></div>
				<div>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
			<div class="btn-r">
			</div>
		</div>
	</header>
	<content class="content-container">
		<div class="content-left">
			<div class="content-left-max">
				<div class="hotadvice">
					<div class="title">
						<ul class="content-title">
							<li class="special">
								<a>热门推荐</a>
							</li>
							<li>
								<a>华语</a>
								<span>|</span>
							</li>
							<li>
								<a>流行</a>
								<span>|</span>
							</li>
							<li>
								<a>摇滚</a>
								<span>|</span>
							</li>
							<li>
								<a>民谣</a>
								<span>|</span>
							</li>
							<li>
								<a>电子</a>
							</li>
							<p class="morethan">更多<em></em></p>
						</ul>
					</div>
					<div class="img-list">
						<ul class="star-list">
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom clear">
										<span class="icon-listen"></span>
										<span class="nb">95014万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a>[华语速爆新歌] KnowKnow甜蜜情歌，表白心中唯一</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">82852万</span>
										<a class="icon-play" title="播放"></a>
									</div>

								</div>
								<p class="star-desc">
									<a>Dream Pop | 在梦境里相拥于星辰</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">30万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a>◎Melbourne bounce | 蹦迪嗎性感小野猫</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">55万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a>
										<i class="icorn-program"></i> 浮生未歇（翻自音频怪物）</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">123万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a>
										san wa man 你和我</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">80万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a><i class="icorn-program"></i>
										选择（钢琴弹唱）</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">144万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a>
										车载提神嗨曲中文DJ</a>
								</p>
							</li>
							<li>
								<div class="star-picture">
									<a href="#"><img src="./img/img3.jpg"></a>
									<div class="bottom">
										<span class="icon-listen"></span>
										<span class="nb">95014万</span>
										<a class="icon-play" title="播放"></a>
									</div>
								</div>
								<p class="star-desc">
									<a><i class="icorn-program"></i>
										「怒号光明」杀戮之塔</a>
								</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="newdiscs">
					<div class="title">
						<ul class="content-title">
							<li class="special">
								<a>新碟上架</a>
							</li>
							<p class="morethan1">更多<em></em></p>
						</ul>
					</div>
					<div class="star-box">
						<div class="btn1" onclick="clickThrottle(btn1left)"></div>
						<div class="discs-list">
							<ul class="discs-star">
								<li>
									<div class="discs-picture">
										<img src="img/zgr.jpg" /> <a class="icon-playv"></a>
									</div>
									<p class="discs-decs"><a>REVIXSIT</a></p>
									<p class="discs-decs"><a>张国荣</a></p>
								</li>
								<li>
									<div class="discs-picture">
										<img src="img/zgr.jpg" /> <a class="icon-playv"></a>
									</div>
									<p class="discs-decs"><a>REVIXSIT</a></p>
									<p class="discs-decs"><a>张国荣</a></p>
								</li>
								<li>
									<div class="discs-picture">
										<img src="img/zgr.jpg" /> <a class="icon-playv"></a>
									</div>
									<p class="discs-decs"><a>REVIXSIT</a></p>
									<p class="discs-decs"><a>张国荣</a></p>
								</li>
								<li>
									<div class="discs-picture">
										<img src="img/zgr.jpg" /> <a class="icon-playv"></a>
									</div>
									<p class="discs-decs"><a>REVIXSIT</a></p>
									<p class="discs-decs"><a>张国荣</a></p>
								</li>
								<li>
									<div class="discs-picture">
										<img src="img/zgr.jpg" /> <a class="icon-playv"></a>
									</div>
									<p class="discs-decs"><a>REVIXSIT</a></p>
									<p class="discs-decs"><a>张国荣</a></p>
								</li>
							</ul>
						</div>
						<div class="btn2" onclick="clickThrottle(btn2right)"></div>
					</div>
				</div>
				<div class="onlist">
					<div class="title">
						<ul class="content-title">
							<li class="special">
								<a>榜单</a>
							</li>
							<p class="morethan2">更多<em></em></p>
						</ul>
					</div>
					<!-- 榜单表格 -->
					<div class="inlist">
						<div class="sing-top">
							<div class="sing-top1 clear">
								<div class="table-picture">
									<img src="img/bsb1.jpg" title="云音乐飙升榜">
									<a class="img-after"></a>
								</div>
								<div class="tit clear">
									<a>
										<h3>云音乐飙升榜</h3>
									</a>
									<div class="btn">
										<a class="btn-2"></a>
										<a class="btn-3"></a>
									</div>
								</div>
							</div>
							<div class="sing-body">
								<ol>
									<li class="table-style">
										<span class="redcolor">1</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">2</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">3</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>4</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>5</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>6</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>7</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>8</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>9</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>10</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="#">查看全部></a>
								</div>
							</div>
						</div>
						<div class="sing-top">
							<div class="sing-top1 clear">
								<div class="table-picture">
									<img src="img/bsb1.jpg" title="云音乐飙升榜">
									<a class="img-after"></a>
								</div>
								<div class="tit clear">
									<a>
										<h3>云音乐飙升榜</h3>
									</a>
									<div class="btn">
										<a class="btn-2"></a>
										<a class="btn-3"></a>
									</div>
								</div>
							</div>
							<div class="sing-body">
								<ol>
									<li class="table-style">
										<span class="redcolor">1</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">2</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">3</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>4</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>5</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>6</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>7</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>8</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>9</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>10</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="#">查看全部></a>
								</div>
							</div>
						</div>
						<div class="sing-top">
							<div class="sing-top1 clear">
								<div class="table-picture">
									<img src="img/bsb1.jpg" title="云音乐飙升榜">
									<a class="img-after"></a>
								</div>
								<div class="tit clear">
									<a>
										<h3>云音乐飙升榜</h3>
									</a>
									<div class="btn">
										<a class="btn-2"></a>
										<a class="btn-3"></a>
									</div>
								</div>
							</div>
							<div class="sing-body">
								<ol>
									<li class="table-style">
										<span class="redcolor">1</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">2</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span class="redcolor">3</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>4</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>5</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>6</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>7</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>8</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>9</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
									<li class="table-style">
										<span>10</span>
										<a>经济舱</a>
										<div class="btn-4">
											<a class="player" title="播放" href="#"></a>
											<a class="added" title="播放列表" href="#"></a>
											<a class="favorite" title="收藏" href="#"></a>
										</div>
									</li>
								</ol>
								<div class="more">
									<a href="#">查看全部></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content-right">
			<div>
				<div class="login">
					<p class="login-title">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
					<a class="login-button" href="#">用户登录</a>
				</div>
			</div>
			<div class="join-singer">
				<h3 class="top-h3 clear">
					<span class="top-title">入住歌手</span>
					<a class="top-all" href="#">查看全部 ></a>
				</h3>
				<ul class="singers">
					<li class="clear">
						<a class="singer clear">
							<div class="singer-pic">
								<img src="img/zhm.jpg" />
							</div>
							<div class="singer-ifo">
								<h4>
									<span>张惠妹aMEI</span>
								</h4>
								<p>台湾歌手张惠妹</p>
							</div>
						</a>
					</li>
					<li>
						<a class="singer clear">
							<div class="singer-pic">
								<img src="img/fin.jpg" />
							</div>
							<div class="singer-ifo">
								<h4>
									<span>Fine乐团</span>
								</h4>
								<p>独立音乐人</p>
							</div>
						</a>
					</li>
					<li>
						<a class="singer clear">
							<div class="singer-pic">
								<img src="img/wxl.jpg" />
							</div>
							<div class="singer-ifo">
								<h4>
									<span>萬曉利</span>
								</h4>
								<p>民谣歌手、中国现代民谣的代表人物之一</p>
							</div>
						</a>
					</li>
					<li>
						<a class="singer clear">
							<div class="singer-pic">
								<img src="img/zl.jpg" />
							</div>
							<div class="singer-ifo">
								<h4>
									<span>音乐人赵雷</span>
								</h4>
								<p>民谣歌手</p>
							</div>
						</a>
					</li>
					<li>
						<a class="singer clear">
							<div class="singer-pic">
								<img src="img/wangsan.jpg" />
							</div>
							<div class="singer-ifo">
								<h4>
									<span>王三溥</span>
								</h4>
								<p>音乐人</p>
							</div>
						</a>
					</li>
				</ul>
				<div>
					<a class="posi">
						<i>申请成为网易音乐人</i>
					</a>
				</div>
			</div>
			<div class="anchor">
				<h3 class="top-h3">热门主播</h3>
				<ul class="anchor-stars">
					<li class="clear">
						<a class="anchor-pic" href="#">
							<img src="img/cl.jpg" />
						</a>
						<div class="anchor-info">
							<p>
								<a class="anchor-name">陈立</a>
								<sup class="icon-V"></sup>
							</p>
							<p class="anchor-dis">心理学家、美食家陈立教授</p>
						</div>
					</li>
					<li class="clear">
						<a class="anchor-pic" href="#">
							<img src="img/ynaqiu.jpg" />
						</a>
						<div class="anchor-info">
							<p>
								<a class="anchor-name">DJ艳秋</a>
								<sup class="icon-V"></sup>
							</p>
							<p class="anchor-dis">著名音乐节目主持人</p>
						</div>
					</li>
					<li class="clear">
						<a class="anchor-pic" href="#">
							<img src="img/gjdjy.jpg" />
						</a>
						<div class="anchor-info">
							<p>
								<a class="anchor-name">国家大剧院古典音乐频道</a>
								<sup class="icon-V"></sup>
							</p>
							<p class="anchor-dis">国家大剧院古典音乐官方</p>
						</div>
					</li>
					<li class="clear">
						<a class="anchor-pic" href="#">
							<img src="img/xxst.jpg" />
						</a>
						<div class="anchor-info">
							<p>
								<a class="anchor-name">谢谢收听</a>
								<sup class="icon-V"></sup>
							</p>
							<p class="anchor-dis">南京电台主持人王馨</p>
						</div>
					</li>
					<li class="clear">
						<a class="anchor-pic" href="#">
							<img src="img/djxu.jpg" />
						</a>
						<div class="anchor-info">
							<p>
								<a class="anchor-name">DJ晓苏</a>
								<sup class="icon-V"></sup>
							</p>
							<p class="anchor-dis">独立DJ，CRI环球旅游广播特邀DJ</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</content>
	<footer class="down-bottom ">
		<div class="footer-max clear">
			<div class="footer-left underline">
				<p class="graytitle">
					<a>服务条款</a>
					<span>|</span>
					<a>隐私政策</a>
					<span>|</span>
					<a>儿童隐私政策</a>
					<span>|</span>
					<a>版权投诉指引</a>
					<span>|</span>
					<a>意见反馈</a>
					<span>|</span>
				</p>
				<p>
					<span class="footer-span">网易公司版权所有©1997-2020&nbsp &nbsp &nbsp<span class="footer-span">杭州乐读科技有限公司运营
							: <a>浙网文[2018]3506-263号</a></span></span>
				</p>
				<p><span class="footer-span">违法和不良信息举报电话：0571-89853516&nbsp &nbsp &nbsp<span
							class="footer-span overwrite">举报邮箱：<a>ncm5990@163.com</a></span></span></p>
				<p>
					<span class="footer-span">粤B2-20090191-18&nbsp&nbsp&nbsp
						<a>
							工业和信息化部备案管理系统网站
							<span class="icon-police"></span>
							<span class="icon-text"> 浙公网安备 33010902002564号</span>
						</a>
					</span>
				</p>
			</div>
			<ul class="footer-right ">
				<li class="begin-first">
					<a class="icon-btn1"></a>
					<span class="btn1-title"></span>
				</li>
				<li>
					<a class="icon-btn2"></a>
					<span class="btn2-title"></span>
				</li>
				<li>
					<a class="icon-btn3"></a>
					<span class="btn3-title"></span>
				</li>
				<li>
					<a class="icon-btn4"></a>
					<span class="btn4-title"></span>
				</li>
				<li>
					<a class="icon-btn5"></a>
					<span class="btn5-title"></span>
				</li>

			</ul>
		</div>
	</footer>
	<script type="text/javascript">
		//封装ajax库

		var state = {
			list1: [],
			list2: [],
			list3: []
		}
		function ajax(opt) {
			opt = opt || {};
			//将小写字符转换成大写字符
			opt.method = opt.method.toUpperCase() || 'POST';
			opt.url = opt.url || '';
			opt.async = opt.async || true;
			opt.data = opt.data || null;
			opt.success = opt.success || function () { };
			var xmlHttp = null;
			//创建ajax对象
			xmlHttp = new XMLHttpRequest();
			//将对象中的元素名称变为数组
			var params = [];
			for (var key in opt.data) {
				params.push(key + '=' + opt.data[key]);
			}
			var postData = params.join('&');
			if (opt.method.toUpperCase() == 'POST') {
				xmlHttp.open(opt.method, opt.url, opt.async);
				xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
				xmlHttp.send(postData);
			} else if (opt.method.toUpperCase() === 'GET') {
				xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
				//（发送请求GET）
				xmlHttp.send(null);
			}
			//接受返回的数据
			xmlHttp.onreadystatechange = function () {
				if (this.readyState == 4 && this.status == 200) {
					opt.success(JSON.parse(xmlHttp.responseText));
				}
			};
		}

		//获取新碟上架
		function getNewDiscs() {
			ajax({
				url: "http://localhost:3000/album/newest",
				data: {},
				method: "POST",
				success: function (response) {
					console.log("新碟上架", response);

					let liList = document.querySelector('ul.discs-star');
					liList.classList.add("ul2");
					let str = '';
					for (let item of response.albums.slice(5, 10)) {
						str += `
									<li>
										<div class="discs-picture">
											<img src="${item.picUrl}" /> <a class="icon-playv" href="#"></a>
										</div>
										<p class="discs-decs"><a href="#">${item.name}</a></p>
										<p class="discs-decs"><a href="#">${item.artist.name}</a></p>
									</li>
								`
					}
					liList.innerHTML = str;

					let str1 = '';
					let ul = document.createElement('ul');
					ul.className = "discs-star ul3";
					for (let item of response.albums.slice(0, 5)) {
						str1 += `
									<li>
										<div class="discs-picture">
											<img src="${item.picUrl}" /> <a class="icon-playv" href="#"></a>
										</div>
										<p class="discs-decs"><a href="#">${item.name}</a></p>
										<p class="discs-decs"><a href="#">${item.artist.name}</a></p>
									</li>
								`
					}
					ul.innerHTML = str1;
					let all = document.querySelector(".discs-list");
					let ul1 = ul.cloneNode(true);
					ul1.className = "discs-star ul1";
					all.append(ul);
					all.prepend(ul1);
					//创建第四个节点
					let ul4 = document.createElement('ul');
					ul4.innerHTML = str;
					ul4.className = "discs-star ul4-1";
					all.append(ul4);
				}
			});
		}
		getNewDiscs();

		//获取榜单onlist
		function getOnList() {
			ajax({
				url: "http://localhost:3000/toplist/detail",
				data: {

				},
				method: 'POST',
				async: false,
				success: function (response) {
					//将字符串转换为对象
					var onList = response.list;
					console.log(555, onList);
					var list1 = onList.find(item => item.name == "云音乐飙升榜")//filter
					var list2 = onList.find(item => item.name == "云音乐新歌榜")
					var list3 = onList.find(item => item.name == "网易原创歌曲榜")
					console.log(list1, list2, list3);

					ajax({
						url: 'http://localhost:3000/top/list?id=' + list1.id,
						method: 'POST',
						// asyne:false,
						success: function (response2) {
							console.log(444, response2);
							let singer = response2.playlist.tracks;
							console.log(666, singer);
							let str = '', str1 = '';
							let singtop = document.createElement('div');
							singtop.className = "sing-top";
							let table = document.querySelector(".inlist");

							str = `
										<div class="sing-top1 clear">
											<div class="table-picture">
												<img src="${response2.playlist.coverImgUrl}" title="${response2.playlist.name}">
												<a class="img-after"></a>
											</div>
											<div class="tit clear">
												<a>
													<h3>${response2.playlist.name}</h3>
												</a>
												<div class="btn">
													<a class="btn-2"></a>
													<a class="btn-3"></a>
												</div>
											</div>
										</div>
									`
							let i = 0;
							for (let item of singer.slice(0, 10)) {
								i++;
								str1 += `
										<li class="table-style">
										
												<span class="${i < 4 ? 'redcolor' : ''}">${i}</span>
												<a>${item.name}</a>
												<div class="btn-4">
													<a class="player" title="播放" href="#"></a>
													<a class="added" title="播放列表" href="#"></a>
													<a class="favorite" title="收藏" href="#"></a>
												</div>
										
										</li>
									`
							}
							let str3 = `
									<div class="more">
										<a href="#">查看全部></a>
									</div>
								`

							singtop.innerHTML = str;

							let singbody = document.createElement('div');
							singbody.className = "sing-body";
							let singbodyol = document.createElement('ol');
							singbodyol.innerHTML = str1;
							let div = document.createElement('div');
							div.innerHTML = str3;
							singbody.append(singbodyol, div);

							singtop.append(singbody);
							table.innerHTML = "";
							table.append(singtop);

						}
					});
					ajax({
						url: 'http://localhost:3000/top/list?id=' + list2.id,
						method: 'POST',
						async: false,
						success: function (response2) {
							// console.log(444, response2);
							let singer = response2.playlist.tracks;
							// console.log(666, singer);
							let str = '', str1 = '';
							let singtop = document.createElement('div');
							singtop.className = "sing-top";
							let table = document.querySelector(".inlist");

							str = `
										<div class="sing-top1 clear">
											<div class="table-picture">
												<img src="${response2.playlist.coverImgUrl}" title="${response2.playlist.name}">
												<a class="img-after"></a>
											</div>
											<div class="tit clear">
												<a>
													<h3>${response2.playlist.name}</h3>
												</a>
												<div class="btn">
													<a class="btn-2"></a>
													<a class="btn-3"></a>
												</div>
											</div>
										</div>
									`
							let i = 0;
							for (let item of singer.slice(0, 10)) {
								i++;
								str1 += `
										<li class="table-style">
											<span class="${i < 4 ? 'redcolor' : ''}">${i}</span>
											<a>${item.name}</a>
											<div class="btn-4">
												<a class="player" title="播放" href="#"></a>
												<a class="added" title="播放列表" href="#"></a>
												<a class="favorite" title="收藏" href="#"></a>
											</div>
										</li>
									`
							}
							let str3 = `
									<div class="more">
										<a href="#">查看全部></a>
									</div>
								`

							singtop.innerHTML = str;

							let singbody = document.createElement('div');
							singbody.className = "sing-body";
							let singbodyol = document.createElement('ol');
							singbodyol.innerHTML = str1;
							let div = document.createElement('div');
							div.innerHTML = str3;
							singbody.append(singbodyol, div);

							singtop.append(singbody);

							table.append(singtop);

						}
					});

					ajax({
						url: 'http://localhost:3000/top/list?id=' + list3.id,
						method: 'POST',
						asyne: false,
						success: function (response2) {
							// console.log(444, response2);
							let singer = response2.playlist.tracks;
							// console.log(666, singer);
							let str = '', str1 = '';
							let singtop = document.createElement('div');
							singtop.className = "sing-top";
							let table = document.querySelector(".inlist");

							str = `
										<div class="sing-top1 clear">
											<div class="table-picture">
												<img src="${response2.playlist.coverImgUrl}" title="${response2.playlist.name}">
												<a class="img-after"></a>
											</div>
											<div class="tit clear">
												<a>
													<h3>${response2.playlist.name}</h3>
												</a>
												<div class="btn">
													<a class="btn-2"></a>
													<a class="btn-3"></a>
												</div>
											</div>
										</div>
									`
							let i = 0;
							for (let item of singer.slice(0, 10)) {
								i++;
								str1 += `
										<li class="table-style">
											<span class="${i < 4 ? 'redcolor' : ''}">${i}</span>
											<a>${item.name}</a>
											<div class="btn-4">
												<a class="player" title="播放" href="#"></a>
												<a class="added" title="播放列表" href="#"></a>
												<a class="favorite" title="收藏" href="#"></a>
											</div>
										</li>
									`
							}
							let str3 = `
									<div class="more">
										<a href="#">查看全部></a>
									</div>
								`
							singtop.innerHTML = str;

							let singbody = document.createElement('div');
							singbody.className = "sing-body";
							let singbodyol = document.createElement('ol');
							singbodyol.innerHTML = str1;
							let div = document.createElement('div');
							div.innerHTML = str3;
							singbody.append(singbodyol, div);

							singtop.append(singbody);
							table.append(singtop);

						}
					});
				}
			});
		}
		getOnList();

		//热门推荐
		function getHotAdviceList() {
			ajax({
				url: "http://localhost:3000/personalized",
				data: {},
				method: 'POST',
				success: function (response) {
					// var i = 0;
					var resultList = response.result;
					// var temp = document.querySelector('.test');
					var divList1 = document.querySelector("ul.star-list");
					console.log(777, resultList);
					let str = ''
					for (let item of resultList.slice(0, 8)) {
						// console.log(6, resultList[item]);
						str += `<li>
									<div class="star-picture">
										<a href="#"><img src="${item.picUrl}"></a>
										<div class="bottom clear">
											<span class="icon-listen"></span>
											<span class="nb">${numFormat(item.playCount)}</span>
											<a class="icon-play" title="播放" href="#"></a>
										</div>
									</div>
									<p class="star-desc">
										<a href="http://localhost:3000/playlist?id=${item.id}">${item.name}</a>
									</p>
								</li>`

						// var li=document.createElement('li');
						// var divpic=document.createElement('div');
						// divpic.className="star-picture";
						// var apic=document.createElement('a');
						// apic.setAttribute("href",'http://localhost:3000/playlist?'+resultList[item].id);
						// apic.innerHTML="<img src="+resultList[item].picUrl+">";

						// var divplay=document.createElement('div');
						// divplay.className="bottom clear";

						// var span1=document.createElement('span');
						// span1.className="icon-listen";
						// var span2=document.createElement('span');
						// span2.className="nb";
						// span2.innerHTML=resultList[item].playCount/10000+"万"

						// var aplay=document.createElement('a');
						// aplay.className="icon-play";
						// aplay.setAttribute("title","播放");

						// divplay.append(span1,span2,aplay);
						// divpic.append(apic,divplay);

						// var pdown=document.createElement('p');
						// pdown.className="star-desc";
						// var adown=document.createElement('a');
						// adown.innerHTML=resultList[item].name;
						// pdown.appendChild(adown);
						// li.append(divpic,pdown);
						// temp.append(li);
					}
					divList1.innerHTML = str
				}
			});
		};
		getHotAdviceList();

		//入住歌手
		function getJoinSinger() {
			ajax({
				url: "http://localhost:3000/dj/toplist/popular",
				data: {},
				method: 'POST',
				success: function (response) {
					console.log("入住歌手", response);
				}

			});
		}
		getJoinSinger();

		/**
		*将数值转换为'万'
		*/
		function numFormat(val) {
			let num = +val % 10000;
			return num > 0 ? num + '万' : num;
		}

		let timer = null, num = 0;
		//点击事件节流
		function clickThrottle(callback) {
			if (num == 0) {
				callback();
			} else return
			num++;
			timer = setTimeout(() => {
				num = 0;
				clearTimeout(timer);
			}, 1000)

		}

		let count = 0;
		//向左
		function btn1left() {
			let uls = document.querySelectorAll('.discs-star');
			count++;
			if (count % 4 == 1) {
				uls[0].className = "discs-star ul2";
				uls[1].className = "discs-star ul3";
				uls[2].className = "discs-star ul4";
				uls[3].className = "discs-star ul1";

			} else if (count % 4 == 2) {
				uls[0].className = "discs-star ul3";
				uls[1].className = "discs-star ul4";
				uls[2].className = "discs-star ul1";
				uls[3].className = "discs-star ul2";

			} else if (count % 4 == 3) {
				uls[0].className = "discs-star ul4";
				uls[1].className = "discs-star ul1";
				uls[2].className = "discs-star ul2";
				uls[3].className = "discs-star ul3";

			} else if (count % 4 == 0) {
				uls[0].className = "discs-star ul1";
				uls[1].className = "discs-star ul2";
				uls[2].className = "discs-star ul3";
				uls[3].className = "discs-star ul4";
			}
			add(count % 4);
			function add(i) {
				uls.forEach(item => {
					item.style.transitionDuration = '0s';
				})
				uls[i].style.transitionDuration = "1s";
				i == 2 ? uls[0].style.transitionDuration = "1s" :uls[i-1].style.transitionDuration = "1s";

			}
		}


		//向右


		function btn2right() {

			let uls = document.querySelectorAll('.discs-star');
			count++;
			if (count % 4 == 1) {
				uls[0].className = "discs-star ul4";
				uls[1].className = "discs-star ul1";
				uls[2].className = "discs-star ul2";
				uls[3].className = "discs-star ul3";

			} else if (count % 4 == 2) {
				uls[0].className = "discs-star ul3";
				uls[1].className = "discs-star ul4";
				uls[2].className = "discs-star ul1";
				uls[3].className = "discs-star ul2";

			} else if (count % 4 == 3) {
				uls[0].className = "discs-star ul2";
				uls[1].className = "discs-star ul3";
				uls[2].className = "discs-star ul4";
				uls[3].className = "discs-star ul1";

			} else if (count % 4 == 0) {
				uls[0].className = "discs-star ul1";
				uls[1].className = "discs-star ul2";
				uls[2].className = "discs-star ul3";
				uls[3].className = "discs-star ul4";
			}
			add(count % 4);
			function add(i) {
				uls.forEach(item => {
					item.style.transitionDuration = '0s';
				})
				uls[i].style.transitionDuration = "1s";
				i == 3 ? uls[0].style.transitionDuration = "1s" : uls[i + 1].style.transitionDuration = "1s";
			}
		}









		/**
		*给btn1添加向右滑动事件
		*/
		// let leftcont = 0;
		// function btn2right() {
		// 	let fat = document.querySelector('.discs-list');
		// 	let left = fat.firstElementChild;
		// 	let middle1 = left.nextElementSibling;
		// 	let middle2 = middle1.nextElementSibling;
		// 	let right = fat.lastElementChild;
		// 	let lis = document.querySelectorAll('.discs-star');
		// 	lis.forEach(item => item.style.transitionDuration = "1s")
		// 	leftcont++;
		// 	if (leftcont % 4 == 1) {
		// 		left.className = "discs-star ul4-1";
		// 		middle1.className = "discs-star ul1";
		// 		middle2.className = "discs-star ul2";
		// 		right.className = "discs-star ul3";
		// 	} if (leftcont % 4 == 2) {
		// 		left.className = "discs-star ul3-1";
		// 		middle1.className = "discs-star ul4";
		// 		middle2.className = "discs-star ul1";
		// 		right.className = "discs-star ul2";

		// 	} if (leftcont % 4 == 3) {
		// 		left.className = "discs-star ul2";
		// 		middle1.className = "discs-star ul3";
		// 		middle2.className = "discs-star ul4-1";
		// 		right.className = "c ul1";
		// 	} if (leftcont % 4 == 0) {
		// 		left.className = "discs-star ul1";
		// 		middle1.className = "discs-star ul2";
		// 		middle2.className = "discs-star ul3";
		// 		right.className = "discs-star ul4-1";
		// 	}
		// 	console.log("左", leftcont);
		// 	let btn = document.querySelector('.ul4-1');
		// 	btn.style.transitionDuration = "0s";

		// }
		// /**
		// *给btn2添加向左滑动事件
		// */
		// function btn1left() {
		// 	let fat = document.querySelector('.discs-list');
		// 	let left = fat.firstElementChild;
		// 	let middle1 = left.nextElementSibling;
		// 	let middle2 = middle1.nextElementSibling;
		// 	let right = fat.lastElementChild;
		// 	let lis = document.querySelectorAll('.discs-star');
		// 	// console.log(lis)
		// 	lis.forEach(item => item.style.transitionDuration = "1s")
		// 	leftcont++;
		// 	if ((leftcont - 1) % 4 == 1) {
		// 		left.className = "discs-star ul2";
		// 		middle1.className = "discs-star ul3";
		// 		middle2.className = "discs-star ul4-1";
		// 		right.className = "discs-star ul1";
		// 	} if ((leftcont - 1) % 4 == 2) {
		// 		left.className = "discs-star ul3";
		// 		middle1.className = "discs-star ul4-1";
		// 		middle2.className = "discs-star ul1";
		// 		right.className = "discs-star ul2";

		// 	} if ((leftcont - 1) % 4 == 3) {
		// 		left.className = "discs-star ul4-1";
		// 		middle1.className = "discs-star ul1";
		// 		middle2.className = "discs-star ul2";
		// 		right.className = "discs-star ul3";
		// 	} if ((leftcont - 1) % 4 == 0) {
		// 		left.className = "discs-star ul1";
		// 		middle1.className = "discs-star ul2";
		// 		middle2.className = "discs-star ul3";
		// 		right.className = "discs-star ul4-1";
		// 	}
		// 	console.log("you", leftcont);
		// 	let btn = document.querySelector('.ul1');
		// 	btn.style.transitionDuration = "0s";
		// }
	</script>
	<ul class="test"></ul>
</body>

</html>